<template>
  <div class="login-wrap">
    <div v-if="other.step == 1" class="ms-login">
      <div class="ms-title">商户注册</div>
      <el-form :model="step1.params" :rules="step1.rules" ref="step1" label-width="80px">
        <el-form-item prop="tel" label="手机号">
          <el-input v-model="step1.params.tel" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input type="password" placeholder="请输入密码" v-model="step1.params.password" @keyup.enter.native="submitForm('step1')"></el-input>
        </el-form-item>
        <el-form-item prop="passwordconf" label="确认密码">
          <el-input type="password" placeholder="请再次输入密码" v-model="step1.params.passwordconf" @keyup.enter.native="submitForm('step1')"></el-input>
        </el-form-item>
        <el-form-item prop="code" label="验证码">
          <div class="input-code">
            <el-input placeholder="请输入验证码" v-model="step1.params.code" @keyup.enter.native="submitForm('step1')"></el-input>
          </div>
          <div class="code">
            <el-button type="primary" :loading="boo.activeCode" @click="getCode">{{boo.activeCode ? `${other.time}秒后重新发送` : '获取手机验证码'}}</el-button>
          </div>
        </el-form-item>
        <div class="btn-container">
          <el-button type="primary" @click="submitStep1('step1')" :loading="boo.isLoading">下一步</el-button>
        </div>
      </el-form> 
    </div>
    <div v-else class="ms-login">
      <div class="ms-title">商户注册信息</div> 
      <el-form :model="step2.params" :rules="rules" ref="step2" label-width="120px" class="scroll-form">
        <el-form-item prop="nickname" label="昵称">
          <el-input v-model="step2.params.nickname" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item prop="fullname" label="姓名">
          <el-input v-model="step2.params.fullname" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item prop="cardid" label="身份证号">
          <el-input placeholder="请输入身份证号" v-model="step2.params.cardid"></el-input>
        </el-form-item>
        <el-form-item prop="cardimg" label="身份证">
          <div class="IDcard-item">
            <el-upload
              class="avatar-uploader jx-uploader"
              name="pic"
              :data="upload"
              :action="$api.common.upload"
              :show-file-list="false"
              :on-success="uploadSuccessZM">
              <img v-if="step2.params.cardfront != ''" :src="step2.params.cardfront" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <p class="txt">身份证正面</p>
          </div>
          <div class="IDcard-item">
            <el-upload
              class="avatar-uploader jx-uploader"
              name="pic"
              :data="upload"
              :action="$api.common.upload"
              :show-file-list="false"
              :on-success="uploadSuccessFM">
              <img v-if="step2.params.cardback != ''" :src="step2.params.cardback" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <p class="txt">身份证反面</p>
          </div>
        </el-form-item>
        <el-form-item prop="storetype" label="店铺类型">
          <el-select v-model="step2.params.storetype" placeholder="请选择店铺类型">
            <el-option v-for="(item, index) in platlist" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="storename" label="店铺名称">
          <el-input v-model="step2.params.storename" placeholder="请输入店铺名称"></el-input>
        </el-form-item>
        <el-form-item prop="storeurl" label="店铺链接">
          <el-input v-model="step2.params.storeurl" placeholder="请输入店铺链接"></el-input>
        </el-form-item>
        <el-form-item label="店铺后台首页截图" prop="storeimg">
          <el-upload
            class="avatar-uploader jx-uploader"
            name="pic"
            :data="uploadsp"
            :action="$api.common.upload"
            :show-file-list="false"
            :on-success="uploadSuccessSP">
            <img v-if="step2.params.storeimg != ''" :src="step2.params.storeimg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item prop="address" label="所在地区">
          <el-cascader placeholder="试试搜索：海南"
            v-model="step2.params.address"
            :options="arealist"
            :props="props" clearable filterable></el-cascader>
        </el-form-item>
        <el-form-item prop="numday" label="预估日均单量">
          <el-input v-model="step2.params.numday" placeholder="请输入预估日均单量"></el-input>
        </el-form-item>
        <div class="btn-container">
          <el-button type="primary" @click="other.step = 1">返回上一步</el-button>
          <el-button type="primary" @click="submitStep2('step2')" :loading="boo.isLoading">立即注册</el-button>
        </div>
      </el-form>      
    </div>   
  </div>
</template>

<script>
  import Sidentify from '../common/identify'
  export default {
    components: {
      Sidentify
    },
    data() {
      const validateTel = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        } else {
          if (this.$reg.isPhone(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确手机号'));
          }
        }
      }  
      const validatePwd = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('密码不能为空'));
        } else {
          if (this.$reg.isPwd(value)) {
            callback();
          } else {
            return callback(new Error('密码格式为6~20位字母或数字'));
          }
        }
      }  
      const validateCPwd = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('密码不能为空'));
        } else {
          if (this.step1.params.password == this.step1.params.passwordconf) {
            callback();
          } else {
            return callback(new Error('两次输入密码不同，请重新输入'));
          }
        }
      }  
      const validateIDCard = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('身份证号不能为空'));
        } else {
          if (this.$reg.isIDCard(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确身份证号'));
          }
        }
      }  
      const validateNum = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入日均单量'));
        } else {
          if (this.$reg.isNum(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确数字'));
          }
        }
      }  
      const validateUrl = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入店铺链接'));
        } else {
          if (this.$reg.isDomain(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确链接'));
          }
        }
      }  
      return {
        https: this.$api.common,
        boo: {
          isLoading: false,
          activeCode: false
        },
        upload: {
          dir: 'IDcardsh'
        },
        uploadsp: {
          dir: 'store'
        },
        props: {
          expandTrigger: 'click',
          value: 'name',
          label: 'name',
        },
        arealist: [],
        platlist: [],
        other: {
          step: 1,
          time: 60,
          codeId: '',
          invitecode: this.$route.query.invitecode, //分站邀请码
        },
        step1: {
          params: {
            tel: '',
            password: '',
            passwordconf: '',
            code: ''
          },
          rules: {
            tel: [{
              required: true,
              validator: validateTel,
              trigger: 'blur'
            }],
            password: [{
              required: true,
              validator: validatePwd,
              trigger: 'blur'
            }],
            passwordconf: [{
              required: true,
              validator: validateCPwd,
              trigger: 'blur'
            }],
            code: [{
              required: true,
              message: '请输入验证码',
              trigger: 'blur'
            }]
          }
        },
        step2: {
          params: {
            fullname: '', //姓名
            cardid: '', //身份证号
            cardfront: '', //身份证正面
            cardback: '', //身份证反面            
            address: [], //所在地区
            storetype: "", //店铺类型
            storename: "", //店铺名称
            storeurl: "", //店铺链接
            storeimg: "", //店铺截图
            numday: '', //日均单量
          },
          rules: {
            nickname: [{
              required: true,
              message: '请输入昵称',
              trigger: 'blur'
            }],
            fullname: [{
              required: true,
              message: '请输入姓名',
              trigger: 'blur'
            }],
            cardid: [{
              required: true,
              validator: validateIDCard,
              trigger: 'blur'
            }],
            address: [{
              required: true,
              message: '请选择所在地区',
              trigger: 'change'
            }],
            storetype: [{
              required: true,
              message: '请选择店铺类型',
              trigger: 'change'
            }],
            storename: [{
              required: true,
              message: '请输入店铺名称',
              trigger: 'blur'
            }],
            storeurl: [{
              required: true,
              validator: validateUrl,
              trigger: 'blur'
            }],
            storeimg: [{
              required: true,
              message: '请上传店铺截图',
              trigger: 'change'
            }],
            numday: [{
              required: true,
              validator: validateNum,
              trigger: 'blur'
            }]
          }
        }
      }
    },
    mounted(){
      let _self = this
    },
    methods: {
      uploadSuccessZM(res, file) {
        let _self = this
      	if (res.status == 200) {
          _self.step2.params.cardfront = res.data
        } else {
          _self.$message.error(res.message)
        }
      },  
      uploadSuccessFM(res, file) {
        let _self = this
      	if (res.status == 200) {
          _self.step2.params.cardback = res.data
        } else {
          _self.$message.error(res.message)
        }
      },   
      uploadSuccessSP(res, file) {
        let _self = this
      	if (res.status == 200) {
          _self.step2.params.storeimg = res.data
        } else {
          _self.$message.error(res.message)
        }
      },  
      getArealist(){
        let _self = this
        let success = (res)=>{
          res = res.data
          if(res.status == 200){
            _self.arealist = res.data
          }else{
            _self.$message.error(res.message)
          }
        }
        _self.$axios.get(_self.https.arealist, {}, success, 'register')
      }, 
      getPlatlist(){
        let _self = this
        let success = (res)=>{
          res = res.data
          if(res.status == 200){
            _self.platlist = res.data
          }else{
            _self.$message.error(res.message)
          }
        }
        _self.$axios.get(_self.https.platlist, {}, success, 'register')
      },
      countDown(){
        let _self = this
        _self.boo.activeCode = true
        let timer = setInterval(()=>{
          if(_self.other.time > 0){
            _self.other.time --
          }else{
            _self.boo.activeCode = false
            _self.other.time = 60
            clearInterval(timer)
          }
        }, 1000)
      },
      getCode(){
        let _self = this
        let params = {
          type: 1,
          username: _self.step1.params.tel
        }
        let success = (res)=>{
          res = res.data
          if(res.status == 200){
            _self.countDown()
            _self.getPlatlist()
          }else{
            _self.$message.error(res.message)
          }
        }
        _self.$axios.post(_self.https.getsmscode, params, success, 'reigster')
      },
      submitStep1(formName) {
        let _self = this
        this.$refs[formName].validate((valid) => {
          if (valid) {             
            let params = {
              type: 1,
              username: _self.step1.params.tel,
              code: _self.step1.params.code
            }
            let success = (res)=>{
              res = res.data
              _self.boo.isLoading = false
              _self.getArealist()
              if(res.status == 200){
                _self.other.step = 2
                _self.other.codeId = res.data.id
              }else{
                _self.$message.error(res.message)
              }
            }
            _self.$axios.post(_self.https.smscode, params, success, 'reigster')      
          } else {
            return false;
          }
        });
      },
      submitStep2(formName) {
        let _self = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            _self.boo.isLoading = true
            let params = {
              id: _self.other.codeId,
              code: _self.step1.params.code,
              username: _self.step1.params.tel,
              password: _self.step1.params.password,
              invitecode: _self.other.invitecode,

              fullname: _self.step2.params.fullname, //姓名
              cardid: _self.step2.params.cardid, //身份证号
              cardfront: _self.step2.params.cardfront, //身份证正面
              cardback: _self.step2.params.cardback, //身份证反面
              regiarea: `${_self.step2.params.address[0]}${_self.step2.params.address[1]}`, //所在地址

              storetype: _self.step2.params.storetype, //店铺类型
              storename: _self.step2.params.storename, //店铺名称
              storeurl: _self.step2.params.storeurl, //店铺链接
              storeimg: _self.step2.params.storeimg, //店铺截图
              numday: _self.step2.params.numday, //日均单量
            }
            let success = (res)=>{
              res = res.data
              _self.boo.isLoading = false
              if(res.status == 200){
                _self.$message.success('商户申请已提交，请等待审核结果')
              }else{
                _self.$message.error(res.message)
              }
            }
            _self.$axios.post(_self.https.register, params, success, 'reigster') 
          } else {
            return false;
          }
        });
      },
    }
  }
</script>

<style scoped lang="sass"> 
$width-small: 320px 
$width-medium: 414px
$width-large: 600px
.IDcard-item
  float: left
  margin-right: 60px
  text-align: center
  .txt
    margin: 0
.login-wrap
  position: absolute
  width: 100%
  height: 100%
  background: url("../../../static/img/bg.jpg")
  background-position: center center
  background-repeat: no-repeat
  background-attachment: fixed
  /deep/ .el-cascader--small
    width: 100%
  .scroll-form
    max-height: 460px
    padding: 0 20px
    overflow-y: auto;
    overflow-x: hidden;
    &::-webkit-scrollbar 
      width: 5px
      height: 10px
    &::-webkit-scrollbar-thumb 
      background-color: #a1a3a9
      border-radius: 3px
  .ms-title 
    position: absolute
    top: 30%
    left: 0
    width: 100%
    margin-top: -230px
    text-align: center
    font-size: 30px
    color: #fff
  .ms-login 
    position: absolute
    left: 50%    
    top: 50%
    transform: translate(-50%, -50%)
    width: 500px
    padding: 40px 20px
    border-radius: 4px
    background: #fff
    .input-code
      float: left
      width: 54%
    .code
      margin-left: 59%
      text-align: right
  .login-btn 
    text-align: center
  .login-btn button 
    width: 100%
    height: 36px
  .action-btn
    cursor: pointer
    color: #999
  .el-select 
    width: 100%
@media only screen and (max-width: 600px) 
  .login-wrap .ms-title 
    font-size: 24px
    top: 45%
  .login-wrap .ms-login
    width: 310px
  .login-wrap .ms-login .input-code
    width: 47%
  .login-wrap .ms-login .code
    margin-left: 50%
@media only screen and (max-width: 350px) 
  .login-wrap .ms-login
    width: 260px
  .login-wrap .ms-title 
    top: 50%
</style>